<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <!-- <script src="./roma.js"></script> -->
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 100%;
        height: 800px;
        display: flex;
    }

    #myecharts {
        width: 700px;
        height: 500px;
        margin: auto;
        border: 1px solid #ccc;
    }
</style>

<body>
    <div id="box">
        <div id="myecharts"></div>
    </div>
</body>
<script type="text/javascript">
    const myecharts = document.getElementById('myecharts')
    // 基于准备好的dom，初始化echarts实例
    //init参数 (dom节点对象,'主题','')
    var myChart = echarts.init(myecharts, 'roma')

    // 指定图表的配置项和数据
    var option = {
        title: {
            show: true,
            text: 'ECharts 入门示例',
            link: 'https://www.baidu.com',
        },
        //控制提示框
        tooltip: {
            // formatter: '{a0},{b0},{c0}', //a0当前图例 b0是xAxis c0是series
            formatter: function (params) {
                //函数 返回html
                console.log(params)
                return `<div>我的${params.seriesName}是：${params.data + 444
                    }</div>`
            },
            textStyle: {
                color: 'red',
            },
        },
        //图例设置
        legend: {
            data: ['机试', '笔试'],
            icon: 'circle',
            // top: 200,
            // left: 30,
        },
        axisLine: {
            onZero: false,
        },
        //X轴 多个X轴
        xAxis: [
            // {
            //     // show: false,
            //     // position: 'top',
            //     data: [
            //         '衬衫111',
            //         '羊毛衫',
            //         '雪纺衫',
            //         '裤子',
            //         '高跟鞋',
            //         '袜子',
            //         '羽绒服',
            //     ],
            // },
            {
                // show: false,
                position: 'bottom',
                data: [
                    '衬衫',
                    '羊毛衫',
                    '雪纺衫',
                    '裤子',
                    '高跟鞋',
                    '袜子',
                    '羽绒服',
                ],
                offset: 10,
            },
        ],
        yAxis: {
            name: '数量',
            nameLocation: 'middle',
            max: 100,
            // min: function () {
            //     return
            // },
        },

        series: [
            {
                legendHoverLink: false,
                name: '机试',
                type: 'bar',
                data: [
                    {
                        value: 65,
                        label: {
                            show: true,
                            color: 'pink',
                            position: 'top'
                        },
                        labelLine: {
                            show: true,
                            lineStyle: {
                                color: 'yellow',
                            },
                        },
                        itemStyle: {
                            color: 'green',
                        },
                    },
                    {
                        value: 80,
                        label: {
                            show: true,
                            color: 'pink',
                            position: 'top',
                        },
                        labelLine: {
                            show: true,
                            lineStyle: {
                                color: 'yellow',
                            },
                        },
                        itemStyle: {
                            color: '#8A2BE2',
                        },
                    },
                    {
                        value: 61,
                        label: {
                            show: true,
                            color: 'pink',
                            position: 'top',
                        },
                        labelLine: {
                            length: 0, // 第一段引导线的长度
                            length2: 50, // 第二段引导线的长度
                            show: true,
                            lineStyle: {
                                color: 'yellow',
                            },
                        },
                        itemStyle: {
                            color: 'green',
                        },
                    },
                    {
                        value: 45,
                        label: {
                            show: true,
                            color: 'pink',
                            position: 'top',
                        },
                        labelLine: {
                            show: true,
                            lineStyle: {
                                color: 'yellow',
                            },
                        },
                        itemStyle: {
                            color: 'yellow',
                        },
                    },
                    {
                        value: 60,
                        label: {
                            show: true,
                            color: 'pink',
                            position: 'top',
                        },
                        labelLine: {
                            show: true,
                            lineStyle: {
                                color: 'yellow',
                            },
                        },
                        itemStyle: {
                            color: 'green',
                        },
                    },
                    {
                        value: 80,
                        label: {
                            show: true,
                            color: 'pink',
                            position: 'top',
                        },
                        labelLine: {
                            show: true,
                            lineStyle: {
                                color: 'yellow',
                            },
                        },
                        itemStyle: {
                            color: '#8A2BE2',
                        },
                    },
                    {
                        value: 55,
                        label: {
                            show: true,
                            color: 'pink',
                            position: 'top',
                        },
                        labelLine: {
                            show: true,
                            lineStyle: {
                                color: 'yellow',
                            },
                        },
                        itemStyle: {
                            color: 'yellow',
                        },
                    },
                   
                ],
                // colorBy: 'data',
            },
            {
                name: '笔试',
                type: 'bar',
                data: [
                    // {
                    //     value: 60,
                    //     label: {
                    //         show: true,
                    //         color: 'pink',
                    //         position: 'top',
                    //     },
                    //     labelLine: {
                    //         show: true,
                    //         // lineStyle: {
                    //         //     color: 'yellow',
                    //         // },
                    //     },
                    //     itemStyle: {
                    //         color: 'green',
                    //     },
                    // },
                    // {
                    //     value: 50,
                    //     label: {
                    //         show: true,
                    //         color: 'pink',
                    //         position: 'top',
                    //     },
                    //     labelLine: {
                    //         show: true,
                    //         lineStyle: {
                    //             color: 'yellow',
                    //         },
                    //     },
                    //     itemStyle: {
                    //         color: 'yellow',
                    //     },
                    // },
                    // {
                    //     value: 45,
                    //     label: {
                    //         show: true,
                    //         color: 'pink',
                    //         position: 'top',
                    //     },
                    //     labelLine: {
                    //         show: true,
                    //         lineStyle: {
                    //             color: 'yellow',
                    //         },
                    //     },
                    //     itemStyle: {
                    //         color: 'yellow',
                    //     },
                    // },
                    // {
                    //     value: 63,
                    //     label: {
                    //         show: true,
                    //         color: 'pink',
                    //         position: 'top',
                    //     },
                    //     labelLine: {
                    //         show: true,
                    //         lineStyle: {
                    //             color: 'yellow',
                    //         },
                    //     },
                    //     itemStyle: {
                    //         color: 'green',
                    //     },
                    // },
                    // {
                    //     value: 58,
                    //     label: {
                    //         show: true,
                    //         color: 'pink',
                    //         position: 'top',
                    //     },
                    //     labelLine: {
                    //         show: true,
                    //         lineStyle: {
                    //             color: 'yellow',
                    //         },
                    //     },
                    //     itemStyle: {
                    //         color: 'yellow',
                    //     },
                    // },
                    // {
                    //     value: 42,
                    //     label: {
                    //         show: true,
                    //         color: 'pink',
                    //         position: 'top',
                    //     },
                    //     labelLine: {
                    //         show: true,
                    //         lineStyle: {
                    //             color: 'yellow',
                    //         },
                    //     },
                    //     itemStyle: {
                    //         color: 'yellow',
                    //     },
                    // },
                    // {
                    //     value: 49,
                    //     label: {
                    //         show: true,
                    //         color: 'pink',
                    //         position: 'top',
                    //     },
                    //     labelLine: {
                    //         show: true,
                    //         lineStyle: {
                    //             color: 'yellow',
                    //         },
                    //     },
                    //     itemStyle: {
                    //         color: 'yellow',
                    //     },
                    // },
                        66, 66, 66, 66, 66, 66, 3
                ],
                // colorBy: 'data',
            },
        ],
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)

        //之前在群里发过 每个人的自己考试成绩  把自己的考试成绩实现一个柱状图，
</script>

</html>